<template>
  <div class="leader-home">
    <div
      class="flex-row vertical-center horizon-center"
      style="z-index: 19; justify-content: flex-start; background-color: #fff; box-shadow: 0 3px 3px #e5e8ed">
      <ElTabs v-model="tab">
        <ElTabPane label="首页" name="dashboard" />
        <ElTabPane label="待办" name="work" />
      </ElTabs>
      <div v-show="tab === 'dashboard'" class="flex-item" style="width: 0; padding: 0 10px; text-align: right">
        <span>统计时间：</span>
        <CapsuleTab v-model="tabValue" :tabs="filterTabs" />
        <span>指定时间：</span>
        <FormDatePicker
          size="mini"
          range-separator="-"
          :clearable="false"
          :start.sync="query.startDate"
          :end.sync="query.endDate"
          style="margin-right: 10px"
          @input="tabValue = ''" />
        <ElButton type="primary" size="mini" @click="search">统计</ElButton>
      </div>
    </div>
    <div class="leader-home-content">
      <KeepAlive>
        <LeaderDashboard v-if="tab === 'dashboard'" ref="leaderDashboard" :query="query" class="leader-page" />
        <LeaderWork v-if="tab === 'work'" class="leader-page" />
      </KeepAlive>
    </div>
  </div>
</template>

<script>
  import LeaderDashboard from '@/views/module/home/LeaderDashboard'
  import LeaderWork from '@/views/module/home/LeaderWork'
  import { beginOfMonth, endOfMonth } from '@web-utils/core'
  import { formatDate } from '@web-utils/integrations/dayjs'
  import { mapState } from 'vuex'
  import { getHalfYear, getQuarter } from '@/util'
  import { hasAuthority } from '@/util/auth'

  const format = date => formatDate(date, 'YYYY-MM-DD')

  export default {
    name: 'LeaderHome',
    components: { LeaderWork, LeaderDashboard },
    provide() {
      return {
        leaderDashboardQuery: this.query
      }
    },
    data() {
      const nowDate = new Date()
      const year = nowDate.getFullYear()
      const y = { start: format(new Date(year, 0, 1)), end: format(new Date(year, 11, 31)) }
      return {
        tab: 'dashboard',
        filterTabs: [
          { label: '本年', value: 'year' },
          { label: '半年', value: 'halfYear' },
          { label: '本季度', value: 'quarter' },
          { label: '本月', value: 'moth' }
        ],
        tabValue: 'year',
        query: {
          ouName: this.ouName,
          ouFullCode: this.ouFullCode,
          startDate: y.start,
          endDate: y.end
        }
      }
    },
    computed: {
      ...mapState('user', {
        unitName: state => state.ouInfos[0].unitName,
        unitFullCode: state => state.ouInfos[0].unitFullCode,
        ouName: state => state.ouInfos[0].ouName,
        ouFullCode: state => state.ouInfos[0].ouFullCode,
        unitId: state => state.ouInfos[0].unitId,
        ouLevelCode: state => state.ouLevelCode
      }),
      // 本级单位
      authorityBJDW() {
        return hasAuthority('D_M_GZTMH_BJDW')
      },
      // 本单位
      authorityBDW() {
        return hasAuthority('D_M_GZTMH_BDW')
      },
      // 本部门
      authorityBBM() {
        return hasAuthority('D_M_GZTMH_BBM')
      }
    },
    watch: {
      async tabValue(newVal) {
        if (!newVal) {
          return
        }
        const nowDate = new Date()
        const year = nowDate.getFullYear()
        const month = nowDate.getMonth() + 1
        const date = nowDate.getDate()
        const map = {
          year: { start: format(new Date(year, 0, 1)), end: format(new Date(year, 11, 31)) },
          halfYear: getHalfYear(nowDate),
          quarter: getQuarter(nowDate),
          moth: {
            start: format(beginOfMonth(`${year}-${month}-${date}`)),
            end: format(endOfMonth(`${year}-${month}-${date}`))
          }
        }
        this.query.startDate = map[newVal].start
        this.query.endDate = map[newVal].end
        await this.search()
      }
    },
    created() {
      this.query.ouName = this.unitName
      this.query.ouFullCode = this.unitFullCode
      this.query.centralDept = this.ouLevelCode === '001' ? 'N' : 'Y'
      // if (this.authorityBJDW) {
      //   this.query.ouName = this.unitName
      //   this.query.ouFullCode = this.unitId
      //   this.query.scope = 'BJDW'
      // } else if (this.authorityBDW) {
      //   this.query.ouName = this.unitName
      //   this.query.ouFullCode = this.unitFullCode
      //   this.query.scope = 'BDW'
      // } else if (this.authorityBBM) {
      //   this.query.ouName = this.ouName
      //   this.query.ouFullCode = this.ouFullCode
      //   this.query.scope = 'BBM'
      // } else {
      //   this.query.ouName = this.ouName
      //   this.query.ouFullCode = this.ouFullCode
      //   this.query.scope = 'BBM'
      // }
    },
    methods: {
      async search() {
        await this.$refs.leaderDashboard?.search()
      }
    }
  }
</script>

<style lang="scss">
  .leader-home {
    @include flex-column;
    height: 100%;

    .el-tabs__item {
      font-size: 16px;
    }

    .leader-home-content {
      @include flex-item;
      height: 0;
      overflow: auto;
    }

    .leader-page {
      min-width: 1140px;
      min-height: 860px;
      padding: 10px;
      background: #fff;
    }
  }
</style>
